<include file="Common/head" />
<link rel="stylesheet" href="__PUBLIC__/css/weixin/iconfont.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/weixin/mui.picker.min.css" />
<link rel="stylesheet" href="__PUBLIC__/css/weixin/mui.poppicker.css" />
<script src="__PUBLIC__/js/weixin/mui.picker.min.js"></script>
<script src="__PUBLIC__/js/weixin/mui.poppicker.js"></script>
<div class="mui-content pb50">
    <ul class="reserve-register">
        <li class="layout-box r-arrow">
            <label>服务部门</label>
            <div id='showUserPicker' class="flex-item1 select-btn">请选择部门</div>
        </li>
        <li class="layout-box r-arrow">
            <label>预约日期</label>
            <div id="reserveDate" class="flex-item1 select-btn">{$curDate}</div>
        </li>
        <li class="layout-box r-arrow">
            <label>预约时间段</label>
            <div id="showTimeRange" class="flex-item1 select-btn">请选择时间段</div>
        </li>
        <li class="layout-box">
            <label>预约剩余/总数</label>
            <div id="surplus_num" class="flex-item1 text">0/0</div>
        </li>
        <li class="layout-box">
            <label>预约人姓名</label>
            <div class="flex-item1">
                <input type="text" class="input" id="member_name" placeholder="请填写您的姓名" value="">
            </div>
        </li>
        <li class="layout-box">
            <label>联系方式</label>
            <div class="flex-item1">
                <input type="tel" class="input" id="mobile" placeholder="请填写您的联系方式" value="">
            </div>
        </li>
        <li>
            <label class="dis-block">预约事项</label>
            <textarea class="textarea" id="content" name="content" rows="3" cols="" placeholder="请填写您的预约事项"></textarea>
        </li>
    </ul>
    <div class="btn-box">
        <button id="sendBtn" class="mui-btn mui-btn-block send-btn" type="button">确认</button>
        <div class="text">
            <a href="{:U('WeiXin/Bespeak/index')}">往期预约 <i class="iconfont icon-zuojiantou"></i></a>
        </div>
    </div>
</div>
<script type="text/javascript">

    var orgId;
    var orderTime = $("#reserveDate").text();
    var timeRange;
    var timeList = [];
    var showRangePickerButton;
    var beginDate = orderTime.split("-");

    (function($) {
        $.init();
        loadOrgList();
        initDate();
        showRangePickerButton = document.getElementById('showTimeRange');
        showRangePickerButton.addEventListener('tap', function(event) {
            initTimeRage();
        }, false);
        document.getElementById("sendBtn").addEventListener('tap', function() {
            doSave();
        });
    })(mui);

    //加载服务部门列表
    function loadOrgList() {
        mui.getJSON(apiUrl+'/Appointment/add',{},function(cbData) {
            var orgList = [];
            if (cbData.code == 200) {
                var data = cbData.data.orgList;
                mui.each(data, function (index, item) {
                    orgList.push({"value":item.id,"text":item.name});
                });
            } else {
                mui.toast(cbData.msg,{duration:'long'});
            }
            initOrg(orgList);
        });
    }

    function initOrg(orgList) {
        var userPicker = new mui.PopPicker();
        userPicker.setData(orgList);
        var showUserPickerButton = document.getElementById('showUserPicker');
        showUserPickerButton.addEventListener('tap', function(event) {
            userPicker.show(function(items) {
                showUserPickerButton.innerText = items[0].text;
                orgId = items[0].value;
                loadTimeRange();
            });
        }, false);
    }

    //初始化日期列表
    function initDate() {
        document.getElementById("reserveDate").addEventListener('tap', function() {
            if (orgId) {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                options.type = "date";
                options.beginDate = new Date(beginDate[0],beginDate[1]-1,beginDate[2]);
                var id = this.getAttribute('id');
                var picker = new mui.DtPicker(options);
                picker.show(function(rs) {
                    document.getElementById("reserveDate").innerText = rs.text;
                    orderTime = rs.value;
                    picker.dispose();
                    loadTimeRange();
                });
            } else {
                mui.toast("请先选择服务部门",{duration:'long'});
            }
        }, false);
    }

    //加载预约时间段列表
    function loadTimeRange() {
        var param = {"org_id":orgId,"order_time":orderTime};
        mui.getJSON(apiUrl+'/Appointment/getAvailableTimeRange',param,function(cbData) {
            timeList = [];
            if (cbData.code == 200) {
                var data = cbData.data;
                mui.each(data, function (index, item) {
                    timeList.push({"value":item,"text":item});
                });
            } else {
                timeRange = "";
                $("#showTimeRange").text("");
                $("#surplus_num").html("0/0");
            }
        });
    }

    //加载预约剩余名额
    function loadSurplusNum() {
        var param = {"org_id":orgId,"order_time":orderTime,"time_range":timeRange};
        mui.getJSON(apiUrl+'/Appointment/getAvailableSurplusNum',param,function(cbData) {
            if (cbData.code == 200) {
                var besNum = cbData.data;
                $("#surplus_num").html(besNum.surplus+"/"+besNum.total);
            }
        });
    }

    function initTimeRage() {
        if (timeList.length == 0) {
            return false;
        }
        var rangePicker = new mui.PopPicker();
        rangePicker.setData(timeList);
        rangePicker.show(function(items) {
            showRangePickerButton.innerText = items[0].text;
            timeRange = items[0].value;
            rangePicker.dispose();
            loadSurplusNum();
        });
    }

    function doSave() {
        if (!orgId) {
            mui.toast("请选择服务部门");
            return false;
        }
        if (!orderTime) {
            mui.toast("请选择预约日期");
            return false;
        }
        if (!timeRange) {
            mui.toast("请选择预约时间段");
            return false;
        }
        var bespeakContent = $("#content").val();
        if (!bespeakContent) {
            mui.toast("请填写您的预约事项");
            return false;
        }
        var memberName = $("#member_name").val();
        if (!memberName) {
            mui.toast("请填写您的真实姓名");
            return false;
        }
        var mobile = $("#mobile").val();
        if (!mobile) {
            mui.toast("请填写您的联系方式");
            return false;
        }
        mui("#sendBtn").button('loading');
        mui.ajax(apiUrl+'/Appointment/doAdd',{
            data:{
                org_id: orgId,
                order_time: orderTime,
                time_range: timeRange,
                content: bespeakContent,
                member_name: memberName,
                mobile: mobile
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            success: function(cbData){
                mui.toast(cbData.msg,{duration:'long'});
                if (cbData.code == 200) {
                    setTimeout(function () {
                        location.href = "{:U('WeiXin/Bespeak/index')}";
                    },3000)
                } else {
                    mui("#sendBtn").button('reset');
                }
            },
            error:function(xhr,type,errorThrown){
                mui("#sendBtn").button('reset');
            }
        });
    }

</script>
<include file="Common/footer" />